<!doctype html>
<html lang="en">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">

    <link rel="stylesheet" href="../css/h5.css" />
    <script src="../js/jquery.min.js"></script>

    <!--vue-->
    <link rel="stylesheet" href="../css/style.min.css">
    <script src="../js/vue.min.js"></script>
    <script src="../js/index.js"></script>

    <style type="text/css">
    /*2015.10.13*/
    /*common*/
    body{background:#fff;}
    *,input[type="text"]{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-tap-outline-color:rgba(0, 0, 0, 0);-webkit-text-size-adjust:none;}
    label{outline:none;}
    input{outline: none;border:0;background:none;}
    .loginareaN{margin:12px 18px 14px;}
    .loginarea{line-height: 0.5em;position:relative;margin-top:-13px;}
    .loginareaN .add{position:absolute;margin:11px 6px 11px 12px;}
    .loginareaN label{padding:0 30px 0 0;width:100%;box-sizing: border-box;border:1px;box-shadow: 1px 1px 0 #f5f5f5;margin-top:12px;position: relative;border-radius:5px;margin-bottom:15px;color:#333333;}
    .loginareaN label.labelNo{border: 1px solid #ff0000;}
    .loginareaN .inptxt{display: block;width:100%;height:44px;background:none;font-size:14px;box-sizing: border-box;line-height:15px;padding-left:36px;color:#333333;}
    .userLocal input[placeholder], [placeholder], *[placeholder] { color:#aaa; !important; }
    .pic_code{display: block;position: absolute;top:7px;right:1px;border-left:1px solid #ddd;padding:0 6px 0 10px;}
    .pic_code img{width:83px;}
    .pic_warp label{background:#f5f5f5;}
    .pictureCode{width:60%;padding-left:5px;margin:0;}
    .formtip{color:#ff0000;font-size:12px;margin:-6px 0 16px 0;}
    .cleanInput{display:block;width:34px;height:36px;line-height:36px;background: center center no-repeat;background-size: 17px auto;position: absolute;top:4px;display:none;}
    .cleanInputR{right:0px;}
    .cleanInputRR{right:0px;}
    .cleanInputRr{right:100px;}
    .cleanInputRrr{right:58px;}
    /*common*/.loginarea
              .loginother{margin:26px 18px 10px;}
    .loginareaN label,input.btn_org[type="button"],.loginareaN .button_area .btn_brown{border-radius:5px;}
    .pic_l,.button_area{position: relative;}
    input.btn_org[type="button"]{height: 32px;}
    #pictureCode{width:60%;padding-left:12px;margin:0;}
    .button_area{padding:0;text-align:center;margin-left:-3px;}
    input.btn_org[type="button"],.loginareaN .button_area .btn_brown{display:block;width:100%;margin-top:48px;padding:0;background:#a0a0a0;color:#fff;height:44px;line-height:30px;font-size:16px;}
    .loginotherN,.loginotherN .hd{background:none;border:none;}
    .loginotherN .hd{text-align: center;}
    .loginotherN .share{text-align: center;}
    .loginotherN .share a{margin:0 8%;display:inline-block;width:38px;height:38px;text-align: center;vertical-align: middle;font-size: 24px;/*border:1px solid #ddd;*/}
    .loginotherN .share a img{margin:0;vertical-align: middle;}
    .loginotherN .hd{background: left center repeat-x;margin:0 30px;margin-top:90px;}
    .loginotherN .hd span{background:#fff;display: inline-block;padding:0 6px;font-size: 10px;text-align:center;color:#a0a0a0;}
    .elseWay{margin-top:18px;text-align:center;}
    .elseWay a{color:#00a0c6;font-size:14px;}
    .userLocal{margin:15px 0 15px;}
    .userLocal label{display: inline;background:none;border:none;margin:0;box-shadow:none;}
    .userLocal input,.userLocal em{vertical-align: middle;font-size: 12px;color:#a0a0a0;}
    .userLocal em{padding-left: 5px;}
    .rUserName{display:none;}
    .userLocal{float:right;margin-top:0;}
    .userLocal span{position: relative;}
    .userLocal i{display:inline-block;width:15px;height: 15px;background:#fff;border:1px solid #a0a0a0;content:'';border-radius:15px;vertical-align: middle;margin-top: -1px;}
    .userLocalH{font-size:13px;}
    .userLocalH a{ color:#666;}
    .userLocalH i{border:1px solid #000;background: #000  no-repeat center center;background-size:10px auto;}
    .loginareaN{margin-top:19px;}
    .loginother-Foot{margin-top:90px;margin-bottom:20px;}
    .loginother-Foot a{float:left;width:32%;height:13px;line-height:13px;text-align:center;vertical-align: middle;font-size:9px;color:#a0a0a0;}
    .loginother-Foot .share-foot{margin:0 50px;}
    .loginother-Foot .share-foot img{margin-top:-2px;vertical-align: middle;}
    .loginother-Foot .share-foot span{padding-left:2px;}


</style>

    <script type="text/javascript">

    </script>
</head>

<body>


<div id="app">
    <!--登录-->
    <div class="screen_wrap" id="divLogin">
        <header>
            <div class="lftarea">
                <a href="./tab-webview-subpage-my.html"><img src="../img/login/new-back.png" width="15" alt="" /></a>
            </div>
            <h2 class="title">登录</h2>
        </header>


        <section autocomplete="off" class="loginarea loginareaN">
            <form id="formid" name="userLogin" action="/signin" method="post">
                <p class="formtip"></p>
                <div id="divName" class="pic_warp">
                    <label>
                        <em><img class="add" width="18" alt="用户名" src="../img/login/my.png"></em>
                        <!-- 账户： -->
                        <input type="text" id="inputName002" class="inptxt jusername" name="userName002" value="" required placeholder="手机号/邮箱"  maxlength="50"/>
                    </label>
                    <p class="formtip"></p>
                </div>
                <div id="divPass" class="pic_warp">
                    <label>
                        <em><img class="add" width="18" alt="" src="../img/login/lock.png"></em>
                        <!-- 密 码： -->
                        <input type="password" id="inputPass002" class="inptxt" name="password002" value="" required placeholder="密码"  maxlength="50" />
                    </label>
                    <p class="formtip"></p>
                </div>

                <!-- 增加验证码 -->
                <div class="userLocal"><span class="userLocalH"><a href="">忘记密码</a></span></div>
                <div class="button_area">
                    <input type="button" id="SubmitBtn" class="btn_org" value="登录" @click="open"/>
                </div>
            </form>
            <div class="elseWay"><a @click="a_register">新用户注册</a></div>

        </section>
        <aside class="loginother loginotherN">
            <div class="hd"><span>第三方平台登录</span></div>
            <div class="share">
                <a href=""><img width="38" alt="qq" src="../img/login/QQ.png"></a>
                <a href=""><img width="38" alt="pay" src="../img/login/pay.png"></a>
                <a href=""><img width="38" alt="sina" src="../img/login/sina.png"></a>
            </div>
        </aside>

    </div>

    <!--注册-->
    <div class="screen_wrap" id="divRegister" style="display: none">
        <header>
            <div class="lftarea">
                <a @click="a_login"><img src="../img/login/new-back.png" width="15" alt="" /></a>
            </div>
            <h2 class="title">新用户注册</h2>
        </header>


        <section autocomplete="off" class="loginarea loginareaN">
            <form id="formid1" name="userLogin" action="/signup" method="post">
                <p class="formtip"></p>
                <div id="divName1" class="pic_warp">
                    <label>
                        <em><img class="add" width="18" alt="用户名" src="../img/login/my.png"></em>
                        <!-- 账户： -->
                        <input type="text" id="inputName001" class="inptxt jusername" name="userName001" value="" required placeholder="手机号/邮箱" maxlength="50"/>
                    </label>
                    <p class="formtip"></p>
                </div>
                <div id="divPass1" class="pic_warp">
                    <label>
                        <em><img class="add" width="18" alt="" src="../img/login/lock.png"></em>
                        <!-- 密 码： -->
                        <input type="password" id="inputPass001" class="inptxt" name="password001" value="" required placeholder="密码" maxlength="50"/>
                    </label>
                    <p class="formtip"></p>
                </div>

                <!-- 增加验证码 -->
                <div class="button_area">
                    <input type="button" class="btn_org" value="注册" @click="openVn"/>
                </div>
            </form>
        </section>

    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data:function(){
            return {
            }
        },
        filters:{

        },

        mounted:function(){
            this.ready();
        },

        methods:{
            ready: function() {
            },

            open: function() {
                var inputName = $('#inputName002').val();
                var inputPass = $('#inputPass002').val();
                $.ajax({
                    url:"http://172.19.192.218:8080/api/test_cookie",
                    type:"get",
                    dataType:"JSON",
                    data: {},
                    error:function(XMLHttpRequest,textStatus,errorThrown){
                        vue.$toast('网络异常...');
                    },
                    success:function(XMLHttpRequest,textStatus,errorThrown){
                        alert('ok');
                    }
                })
            },

            openVn: function() {
                var vue = this;
                var inputName = $('#inputName001').val();
                var inputPass = $('#inputPass001').val();
                $.ajax({
                    url:"http://172.19.192.218:8080/api/users",
                    type:"post",
                    dataType:"JSON",
                    data: {"email": inputName, "passwd": inputPass},
                    error:function(XMLHttpRequest,textStatus,errorThrown){
                        vue.$toast('网络异常...');
                    },
                    success:function(XMLHttpRequest,textStatus,errorThrown){
                        var cookies = plus.navigator.getCookie("http://172.19.192.218:8080/api/test_cookie");
                        plus.navigator.setCookie( "http://172.19.192.218:8080/", cookies );
                    }
                })
            },

            a_register: function(){
                $('#divLogin').slideUp(function() {
                    $('#divRegister').slideDown();
                })
            },

            a_login: function(){
                $('#divRegister').slideUp(function() {
                    $('#divLogin').slideDown();
                })
            }
        }
    });
</script>

</html>